﻿@model ChoiceModel

@{
    var controlId = Model.BuildControlId();
    var items = Model.Values ?? new List<ChoiceItemModel>();
    var srLabelTemplate = T("Aria.Label.Choice");
}

<div class="choice-boxes" 
     id="choice-boxes-@Model.Id" 
     role="radiogroup"      
     data-manualselect="true"
     aria-orientation="horizontal"  
     attr-aria-required='(Model.IsRequired, "true")'>
    <ul class="choice-box-group">
        @foreach (var item in items)
        {
            string css = null;
            string boxClass = "choice-box";
            string elClass = "choice-box-element";
            string label = item.GetItemLabel();
            bool isDark = false;

            if (item.IsPreSelected)
            {
                boxClass += " selected";
            }

            var hasColor = item.Color.HasValue() && item.Color != "transparent";
            if (hasColor)
            {
                css = "background-color: " + item.Color + ";";
                isDark = ImagingHelper.GetPerceivedBrightness(item.Color) < 200;
                if (isDark)
                {
                    boxClass += " dark";
                }
            }

            var hasImage = item.ImageUrl.HasValue();
            if (hasImage)
            {
                css += "background-image: url('" + item.ImageUrl + "');";
            }

            if (item.IsDisabled)
            {
                boxClass += " disabled";
            }
            else if (item.IsUnavailable)
            {
                boxClass += " unavailable";
                if (hasImage)
                {
                    elClass += " choice-box-image";
                }
                else if (hasColor)
                {
                    elClass += " choice-box-color";
                }
            }

            if (item.Title.HasValue())
            {
                label += " - " + item.Title;
            }

            <li class="@boxClass">
                <input type="radio"
                       class="choice-box-control-native"
                       id="@(controlId)_@(item.Id)"
                       name="@(controlId)"
                       value="@item.Id"
                       aria-label="@srLabelTemplate.Value.FormatInvariant(Model.Name, label)"
                       attr-checked='(item.IsPreSelected, "checked")'
                       attr-disabled='(item.IsDisabled, "disabled")' />

                <label class="choice-box-label" for="@(controlId)_@(item.Id)">
                    <span class="choice-box-content tooltip-toggle tooltip-toggle-touch" title="@label">
                        <span class="@elClass" attr-style="(css.HasValue(), css)">
                            <span sm-if="!css.HasValue()" class="choice-box-text">@item.Name</span>
                        </span>
                    </span>
                </label>
            </li>
        }
    </ul>
</div>
